<template>
	<div class="loginPage">
		<el-row class="topTips">
			<el-col>
				<marquee onmouseover=this.stop() onmouseout=this.start()>
					<i class="el-icon-bell"></i>
					欢迎您使用{{global.platformName}}！已为您分配体验账户：123456&emsp;密码：123456
			</marquee>
			</el-col>
		</el-row>
		<div class="loginForm">
			<el-row>
				<el-col class="logoName">
					<img :src="logoUrl">
					{{global.platformName}}
				</el-col>
				<el-col :span="16" :offset="4">
					<el-input placeholder="账户" v-model="userName">
						<template slot="prepend"><i class="iconfont icon-account"></i>&nbsp;账户</template>
					</el-input>
				</el-col>
				<el-col :span="16" :offset="4">
					<el-input placeholder="密码" v-model="userPwd" type="password" @keyup.enter.native="loginCheck">
						<template slot="prepend"><i class="iconfont icon-mima"></i>&nbsp;密码</template>
					</el-input>
				</el-col>
				<el-col :span="16" :offset="4">
					<el-button type="primary" round style="width:100%" @click="loginCheck">确 认 登 录</el-button>
				</el-col>
				<el-col :span="16" :offset="4">
					<router-link to="/duty/" class="tips" target="_blank">
						*使用前请详细阅读《平台使用必读》
					</router-link>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'Login',
		data(){
			return{
				userName:'',
				userPwd:'',
				logoUrl:require('../assets/helowin.png')
			}
		},
		computed:{
			patient:{
				set(value){
				},
				get(){
					return this.$store.state.patient;
				}
			}
		},
		methods:{
			loginCheck:function(){
				var vm =this;
				this.$axios.loginCheck(vm.userName,vm.userPwd).then(function(res){
					if (res.data.code == 200 || res.data.code == "200") {
						vm.$cookies.set('token',res.headers.token,3600);
						vm.$cookies.set("curUser",res.data.data,-1);
						vm.$router.push({path:'/'});
					}else{
						vm.$notify({
				          title: '登录错误',
				          message: res.data.msg,
				          type: 'error'
				        });
					}
				},function(res){
					console.log("error:"+res);
					vm.$notify({
				          title: '访问异常',
				          message: "当前系统无法访问，请联系工作人员或稍后再试！",
				          type: 'error'
				        });
				});
			}
		},
		created(){
			//如果token存在，清除当前token
			if (this.$cookies.get("token")) {
				this.$axios.logOut();
				this.$cookies.remove("token");
				this.$cookies.remove("curUser");
			}
		}
	}
</script>
<style type="text/css" scoped>
.loginPage{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #00808b;
}
.loginForm{
	width: 500px;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -250px;
	margin-top: -200px;
	border: 1px solid #eeeeee;
	border-radius: 25px;
	background-color: rgba(80,130,130,0.7);
}
.loginForm .el-col{
	margin-bottom: 15px;
	margin-top: 10px;
}
.logoName{
	color: #ffffff;
	font-size: 18pt;
}
.loginForm img{
	vertical-align: middle;
}
.tips{
	cursor: pointer;
	font-size: 10pt;
	color: #cccccc;
}
.topTips{
	background-color: rgba(0,0,0,0.3);
	border-bottom: 1px solid #cccccc;
	color: #cccccc;
	height: 30px;
	line-height: 30px;
	font-size: 11pt;
	text-align: right;
}
</style>